/*
 * @Author: FengKongLi 
 * @Date: 2021-08-17 18:37:42 
 * @Last Modified by: FengKongLi
 * @Last Modified time: 2021-08-22 02:00:07
 */
// 个人信息页面
<template>
  <div class="user-details">
    <!-- 头像、修改头像 -->
    <div class="user-face">
      <!-- 头像显示 -->
      <div class="left">
        <div class="photo-box">
          <img :src="infoData.userFace" alt="" />
        </div>
      </div>
      <!-- 修改头像 -->
      <div class="right">
        <el-button size="medium" type="text" @click="toAlterUserface"
          >修改头像</el-button
        >
      </div>
    </div>
    <!-- 详细信息 -->
    <div>
      <el-form label-width="100" size="small">
        <!-- {{infoData}} -->
        <el-form-item label="登录用户">{{ infoData.username }}</el-form-item>
        <el-form-item label="用户姓名">{{ infoData.realname }}</el-form-item>
        <el-form-item label="用户手机">{{ infoData.telephone }}</el-form-item>
        <el-form-item label="用户性别">
          {{ infoData.gender == "male" ? "男" : "女" }}
          <i v-if="infoData.gender === 'male'" class="el-icon-male"></i>
          <i v-else class="el-icon-female"></i>
        </el-form-item>
        <el-form-item label="用户角色">{{
          infoData.roles[0].name
        }}</el-form-item>
        <el-form-item label="用户生日">{{
          infoData.birth | fmtDate
        }}</el-form-item>
        <el-form-item label="注册时间">{{
          infoData.registerTime | fmtDate
        }}</el-form-item>
        <el-form-item label="邮箱">{{
          infoData.email === "" ? "暂无" : infoData.email
        }}</el-form-item>
        <el-form-item label="用户状态">
          <el-tag
            :type="infoData.status === '正常' ? 'success' : 'danger'"
            size="small"
            >{{ infoData.status }}</el-tag
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 修改个人信息 -->
    <div class="alter-btn">
      <el-button size="medium" type="text" @click="toAlterInfo"
        >修改个人信息</el-button
      >
    </div>
    <!-- 修改头像对话框开始 -->
    <el-dialog
      title="更改头像"
      :visible.sync="visible_userface"
      width="50%"
      @close="avatarClose"
    >
      <div style="display: flex">
        <div>头像</div>
        <div style="flex: 1">
          <el-upload
            class="avatar-uploader"
            :action="uploadFileURL"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible_userface = false" size="small"
          >取 消</el-button
        >
        <el-button type="primary" size="small" @click="avatarSave"
          >确 定 修 改</el-button
        >
      </span>
    </el-dialog>
    <!--  修改头像对话框结束 -->
    <!-- 个人信息修改对话框开始 -->
    <el-dialog
      title="修改个人信息"
      :visible.sync="infoVisible"
      
      @close="toClose"
    >
      <el-form :model="infoForm" :rules="rules" ref="ruleForm">
        <el-form-item label="登录用户" :label-width="formLabelWidth">
          <el-input v-model="infoForm.username" disabled />
        </el-form-item>
        <el-form-item label="姓名" prop="realname" :label-width="formLabelWidth">
          <el-input v-model="infoForm.realname" />
        </el-form-item>
        <el-form-item label="性别" prop="gender" :label-width="formLabelWidth">
          <el-radio v-model="infoForm.gender" label="male">男</el-radio>
          <el-radio v-model="infoForm.gender" label="female">女</el-radio>
        </el-form-item>
        <el-form-item label="用户手机" prop="telephone" :label-width="formLabelWidth">
          <el-input v-model="infoForm.telephone" />
        </el-form-item>
        <el-form-item label="用户邮箱" prop="email" :label-width="formLabelWidth">
          <el-input v-model="infoForm.email" />
        </el-form-item>
        <el-form-item label="出生日期" :label-width="formLabelWidth">
          <el-form-item>
            <el-date-picker
              v-model="infoForm.birth"
              value-format="timestamp"
              type="date"
              placeholder="选择日期"
              style="width: 50%"
            />
          </el-form-item>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="infoVisible = false">取 消</el-button>
        <el-button type="primary" @click="toSave">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 个人信息修改对话框结束 -->
  </div>
</template>

<script>
import state from "@/store/modules/user";
import { findUserDetailsById, alterUserface, saveOrUpdate } from "@/api/user";
import { showFileURL, uploadFileURL } from "@/utils/config";
import { fmtDate } from "@/filters/index.js";
export default {
  data() {
    return {
      // 图片显示和上传地址
      showFileURL,
      uploadFileURL,
      // 时间格式
      fmtDate,
      id: null,
      // 个人信息数据
      infoData: {},
      // 修改头像对话框显示与隐藏
      visible_userface: false,
      // 图片url
      imageUrl: "",
      // 零时图片url
      tempImg: null,
      flagAvatar: false,
      // 个人信息修改对话框显示与隐藏
      infoVisible:false,
      // 个人信息对话框表单数据
      infoForm:{},
      // 表单标签宽度
      formLabelWidth:'80px',
      // 个人信息表单数据校验
      rules:{
        realname: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
        ],
        gender: [
          { required: true, message: "请选择用户性别", trigger: "blur" },
        ],

      },
    };
  },
  created() {
    this.id = state.state.userId;
  },
  //mounted通常是为metheds函数提前定义（ 类似提前声明变量 进入页面内容全部渲染完成后自动引函数
  mounted() {
    this.getData();
  },
  methods: {
    // 获取个人信息
    async getData() {
      // console.log(this.token);
      // let res =await getInfo(this.token);
      // console.log(res);
      let res = await findUserDetailsById({ id: this.id });
      // console.log(res);
      this.infoData = res.data;
    },
    // 点击修改头像
    toAlterUserface() {
      this.tempImg = "";
      this.visible_userface = true;
    },
    //图片上传成功的回调函数
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      // 从图片服务器请求图片路径存到表单
      this.tempImg = file.response;
    },
    //图片上传之前的回调函数
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 点击确定，保存头像修改
    async avatarSave() {
      let res = await alterUserface({
        id: this.infoData.id,
        userface: this.tempImg,
      });
      if (res.status !== 200) return this.$message.error("头像更改失败");
      this.flagAvatar = true;
      this.visible_userface = false;
      this.$message.success("头像更改成功");
      this.getData();
    },
    // 头像修改对话框关闭
    avatarClose() {
      this.imageUrl = "";
      if (!this.flagAvatar) {
        this.$message.info("取消操作");
      }
      this.flagAvatar = false;
    },
    // 点击修改个人信息按钮
    toAlterInfo(){
      this.infoForm={...this.infoData};
      this.infoVisible=true;
    },
    // 个人信息修改对话框保存
    toSave(){
       this.$refs.ruleForm.validate(async (valid) =>{
				 if(valid){
           // 校验通过，做保存
					 // console.log("校验通过");
         let res = await saveOrUpdate({...this.infoForm});
         // 提示用户保存成功，刷新表格数据，关闭对话框
         this.$notify.success({
           title:"保存成功",
           message:res.message,
         });
         //刷新数据就是重新请求数据,调用请求方法
         this.getData();
         // this.toClose();
         this.infoVisible=false;
				 }else{
           // 校验不通过
           return false;
         }
			 });
    },
    // 个人信息修改对话框关闭
    toClose(){
       // 重置表单验证
         this.$refs.ruleForm.resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.user-details {
  position: relative;
}
.user-face {
  display: flex;
  padding: 1em 200px;

  & > div {
    flex: 1;
  }
  .left {
    .photo-box {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      box-shadow: 0px 0px 15px #40e0d0;
      overflow: hidden;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
  .right {
    padding-top: 2%;
    text-align: right;
  }
}
.alter-btn {
  position: absolute;
  right: 13%;
}
</style>